<template>
    <!-- 可以在对象中写多个字段来操作多个class。此外
    ：class 指令可以跟class共存 -->
<div class="container"
    :class="{'active':isActive, 'text-danger':hasError}"
>
    <p v-if="hasError">出错了</p>
    <p v-else>一切良好</p>
    <button @click="isActive = !isActive">点击</button>
    <button @click="hasError = !hasError">出错</button>
</div>
</template>

<script setup>
    import {ref} from 'vue'

    const isActive = ref(true);
    const hasError = ref(false);
</script>

<style scoped>
.container{
    background-color: rgb(177, 177, 177);
    border-radius: 15px;
    padding:10px;
    margin:10px;
}
.active{
    background-color: rgb(219, 178, 127);
}
.text-danger{
    color:red;
}
</style>